<template>
    <div class="refund-or-change PublicListStyle">
      <template v-if='beforeGetFocus'>
        <div class='searchDiv marginBottom-20'>
          <i class='el-icon-search searchBtn'></i>
          <el-input placeholder="姓名/电话/车站" class='searchInput' @focus='onFousEvent'></el-input>
        </div>
      </template>
      <template v-else>
        <div class='onfousInput marginBottom-20'>
          <div class='onfocusInputContent'>
            <i class='el-icon-search searchBtn1'></i>
            <el-input placeholder="姓名/电话/车站"  class='searchInput1' :maxlength='20' v-model='searchInfo.search' @keyup.native.enter='loadList(1)' ref='searchInput1'></el-input>
            <i class='el-icon-close closeSearch' @click='closeSearch'></i>
            <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition'>条件重置</el-button>
            <el-button type='primary' class='btn-primary searchCustomer' @click='loadList(1)'>搜索</el-button>
            <div class='lineStyle'></div>
            <div class='conditionBtn'>
              更多条件筛选
           </div>
            <div class='searchByCondition' >
              <el-form :inline="true" class="demo-form-inline" ref='searchForm' :model='searchInfo'>
                <el-form-item label="乘车车站" prop='startSiteId'>
                  <el-select v-model='searchInfo.startSiteId' @change='loadList(1)'>
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item,index) in siteList" :key="index"
                               :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="到达车站" prop='endSiteId'>
                  <el-select v-model='searchInfo.endSiteId' @change="loadList(1)">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="(item,index) in siteList" :key="index"
                               :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <div style="display: inline-block;">
                  <el-form-item label="发车时间从" style='margin-right:15px;'>
                    <el-date-picker v-model="searchInfo.rideTimeOne" type="datetime"
                                    placeholder="开始时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                    @change="changeDate('rideTimeOne')"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="到">
                    <el-date-picker v-model="searchInfo.rideTimeTwo" type="datetime"
                                    placeholder="结束时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                    @change="changeDate('rideTimeTwo')"></el-date-picker>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </template>

      <div class="gray_bg tabContainer" v-loading="isLoading" element-loading-text="拼命加载中">
        <el-table :data="tableData.elements">
          <el-table-column label="购票人姓名" prop="buyer" width="110px"></el-table-column>
          <el-table-column label="电话" prop="phone"></el-table-column>
          <el-table-column label="发车时间" prop="rideTime" width="170px">
            <template slot-scope="scope">
              {{ scope.row.rideTime | formatMinutes }}
            </template>
          </el-table-column>
          <el-table-column label="乘车车站" prop="startSite" show-overflow-tooltip></el-table-column>
          <el-table-column label="到达车站" prop="endSite" show-overflow-tooltip></el-table-column>
          <el-table-column label="有效购票数量（张）" prop="ticketAmount"></el-table-column>
          <el-table-column label="状态" prop="statusCN" width="80px"></el-table-column>
          <el-table-column width="130px">
            <template slot-scope="scope" v-if="scope.row.status==='Wait_Check'">
              <mk-permission :perms="['Ticket:TicketManagement:RefundChanges:update']">
                <el-button type="text" class="handle-btn"
                           @click.stop="openDialog(scope.row.id, 'refund')">退票</el-button>
                <el-button type="text" class="handle-btn"
                           @click.stop="openDialog(scope.row.id, 'change')">改签</el-button>
              </mk-permission>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-if="parseInt(tableData.totalAmount)>0"
                       :current-page="tableData.page" :page-size="tableData.size"
                       :total="parseInt(tableData.totalAmount)" layout="total, prev, pager, next"
                       @current-change="loadList"></el-pagination>
      </div>

      <mk-change-ticket-form :dialog-visible="formDialogVisible"
                             :type="handleType" :order-id="orderId"
                             @submitSuccess="loadList"
                             @closeDialog="formDialogVisible=false"></mk-change-ticket-form>

    </div>
</template>

<script>
  import { mapState } from 'vuex'
  import MkChangeTicketForm from './changeTicketForm.vue'
  import ticketService from '../../../services/ticket'
  import MkPermission from "../../../components/MkPermission"

  export default {
    name: 'MkChangeTicketList',

    components: {
      MkChangeTicketForm, MkPermission
    },

    props: ['activeName'],

    computed: mapState({
      siteList: state => state.route.siteList
    }),

    watch: {
      activeName: function (value) {
        if (value === 'first') {
          this.closeSearch();
        }
      }
    },

    methods: {
      loadList (pageValue) {
        let hasCondition = false;
        for (let item in this.searchInfo) {
          if (item !== 'page.pn' && item !== 'page.size' && item !== 't') {
            if (this.searchInfo[item]) {
              hasCondition = true;
              break;
            }
          }
        }
        if (hasCondition) {
          this.isLoading = true;
          if (pageValue) {
            this.searchInfo['page.pn'] = pageValue;
          }
          ticketService.loadChangeTicketListServer (this.searchInfo, data => {
            this.tableData = data.data;
            this.isLoading = false;
          });
        }
      },

      changeDate (type) {
        if (this.searchInfo[type]) {
          this.searchInfo[type] = new Date(this.searchInfo[type]).pattern('yyyy-MM-dd HH:mm');
        } else {
          this.searchInfo[type] = '';
        }
        if ((this.searchInfo.rideTimeOne && this.searchInfo.rideTimeTwo) || (!this.searchInfo.rideTimeOne && !this.searchInfo.rideTimeTwo)) {
          this.loadList(1);
        }
      },

      openDialog (orderId, type) {
        this.handleType = type;
        this.orderId = orderId;
        this.formDialogVisible = true;
      },

      onFousEvent() {
        this.beforeGetFocus = false;
        this.$nextTick(() => {
          this.$refs.searchInput1.$el.children[0].focus();
        });
      },

      closeSearch(formName) {
        this.resetCondition();
        this.beforeGetFocus = true;
      },

      resetCondition(formName) {
        for (let item in this.searchInfo) {
          if (item === 'page.size') {
            this.searchInfo[item] = 10;
          } else if (item === 'page.pn') {
            this.searchInfo[item] = 1;
          } else {
            this.searchInfo[item] = '';
          }
        }
        this.tableData = {};
      },
    },

    data () {
      return {
        beforeGetFocus: true,
        isLoading: false,
        formDialogVisible: false,
        orderId: '',
        handleType: '',
        searchInfo: {
          'page.pn': 1,
          'page.size': 10,
          rideTimeOne: '',
          rideTimeTwo: '',
          endSiteId: '',
          search:'',
          startSiteId:''
        },
        tableData: {},
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    }
  }
</script>

<style lang='less'>
  .refund-or-change {
    .handle-btn {
      padding: 0 5px;
      min-width: 40px;
    }
  }
</style>
